<template>
 <div>
    <h1 >高管节点维护</h1>
   <el-form :inline="true" class="demo-form-inline" >
     <el-form-item label="姓名">
       <el-input></el-input>
     </el-form-item>


     <el-form-item >
       <el-button type="success" >查询</el-button>
       <el-button type="success" @click="addPage">新增</el-button>
     </el-form-item>
   </el-form>


   <el-table border :data="list" v-loading="loading" element-loading-text="AI正在思考中..." element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"style="width:100%">
     <el-table-column label="高管姓名" prop="name"   width="100px"></el-table-column>
     <el-table-column label="性别" prop="gender" ></el-table-column>
     <el-table-column label="身份证号" prop="id_no" ></el-table-column>
     <el-table-column label="出生日期" prop="birth_date" ></el-table-column>
     <el-table-column label="职位" prop="position" ></el-table-column>
     <el-table-column label="操作">
       <template slot-scope="x">
         <el-button type="warning" size="mini" @click="edit(x.$index,x.row)">编辑</el-button>
         <el-button type="danger" size="mini" @click="del(x.$index,x.row)">删除</el-button>
       </template>
     </el-table-column>
   </el-table>



   <!-- 编辑- 对话框组件 -->
   <el-dialog :visible.sync="isShow" width="30%" title="人员节点信息编辑">
     <el-form label-width="80px">
       <el-form-item label="高管姓名">
         <el-input v-model="seniorUpdate.name" ></el-input>
       </el-form-item>
       <el-form-item label="性别">
         <el-input v-model="seniorUpdate.gender" ></el-input>
       </el-form-item>
       <el-form-item label="身份证号">
         <el-input  v-model="seniorUpdate.id_no" disabled></el-input>
       </el-form-item>
       <el-form-item label="出生日期">
         <el-input  v-model="seniorUpdate.birth_date"></el-input>
       </el-form-item>
       <el-form-item label="职位">
         <el-input  v-model="seniorUpdate.position"></el-input>
       </el-form-item>


       <el-form-item >
         <el-button type="success" size="mini" @click="updateNode()">保存</el-button>
         <el-button type="success" size="mini">重置</el-button>
       </el-form-item>
     </el-form>
   </el-dialog>

   <!-- 新增- 对话框组件 -->
   <el-dialog :visible.sync="addShow" width="30%" title="人员节点信息新增">
     <el-form label-width="80px">
       <el-form-item label="高管姓名">
         <el-input v-model="senior.name" ></el-input>
       </el-form-item>
       <el-form-item label="性别">
         <el-input v-model="senior.gender" ></el-input>
       </el-form-item>
       <el-form-item label="身份证号">
         <el-input  v-model="senior.id_no"></el-input>
       </el-form-item>
       <el-form-item label="出生日期">
         <el-input  v-model="senior.birth_date"></el-input>
       </el-form-item>
       <el-form-item label="职位">
         <el-input  v-model="senior.position"></el-input>
       </el-form-item>
       <el-form-item >
         <el-button type="success" size="mini" @click="createNode()">保存</el-button>
         <el-button type="success" size="mini">重置</el-button>
       </el-form-item>
     </el-form>
   </el-dialog>


 </div>
</template>

<script>
    export default {
        name: "LIst",
        data(){
          return{
            senior:{
              name:"",
              gender:"",
              id_no:"",
              birth_date:"",
              position:""
            },
             seniorUpdate:{
              name:"",
              gender:"",
              id_no:"",
              birth_date:"",
              position:""
            },
            list:[],
            isShow:false, //编辑对话框是否显示
            addShow:false,//新增对话框是否显示
            loading:false //控制加载框是否显示

          }
        },
      mounted() {
          this.queryNode();
      },
      methods:{
          createNode(){
            const self=this;
            this.$http.get("/api/createSeniorNode/",{params:self.senior})
              .then(function (res) {
                if(res.data.code==200){
                  self.$message(res.data.msg);
                  //关闭对话框
                  self.addShow=false;
                  //查询节点
                  self.queryNode();
                }
              })
          },
          queryNode(){
            const self=this;
            self.loading=true;
            //显示加载框
            this.loading=true;
            this.$http.get("/api/querySeniorNode/").then(function (rs){
              console.log(rs.data);
              //隐藏加载框
              self.loading=false;
              if (rs.data.code==200){
                self.list=rs.data.data;
              }else{
                self.list=[];
              }
            })
          },
        updateNode(){
            const self=this;
            this.$http.get("/api/updateSeniorNode/",{params:self.seniorUpdate})
              .then(function (res) {
                if(res.data.code==200){
                  self.$message(res.data.msg);
                  //关闭对话框
                  self.isShow=false;
                  //查询节点
                  self.queryNode();
                }
              })
        },
        edit:function(index,x){
          this.isShow = true;
          //数据回显
          this.seniorUpdate = x;
        },
        del:function(inde,x){
          const self=this;
          this.$confirm("是否要删除这个节点？","提示").then(function (){
              self.$http.get("/api/deleteSeniorNode/",{params:x}).then(function (res) {
                if(res.data.code==200){
                  self.$message(res.data.msg);
                  self.queryNode();
                }
              })
          }).catch(function (){
            self.$message("取消删除")
          })
        },
        addPage:function(){
          this.addShow = true;
        },

      }
    }
</script>

<style scoped>

</style>
